<template>
  <div class="file-wrapper">
    <div class="file-head">
      <div class="left">
        <span>文件</span>
      </div>
      <div class="right">
        <div style="display:flex;" class="search-area">
          <el-input
            v-model="searchName"
            placeholder="搜索名字"
            clearable
          />
          <Position @click="searchEvent" class="search-icon"/>
          <svg-icon
            v-if="searchName != ''"
            icon-class="clear"
            class="search-icon"
            @click="clearInput"
          />
        </div>
        <el-dropdown trigger="click" placement="bottom">
          <svg-icon icon-class="addFile" class="image" />
          <template #dropdown>
            <el-dropdown-menu style="width: 150px;padding: 0">
              <el-dropdown-item style="border-bottom: 1px solid #DEDEDE">
                <el-upload
                  action
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="handleChange"
                >
                  <div class="up_file">
                    <svg-icon icon-class="upload_file" class="icon" />
                    <span>上传文件</span>
                  </div>
                </el-upload>
              </el-dropdown-item>
              <el-dropdown-item style="border-bottom: 1px solid #DEDEDE">
                <div class="up_dir" @click="uploadFolder">
                  <svg-icon icon-class="updir" class="icon" />
                  <span>上传文件夹</span>
                  <input v-show="false" type="file" ref="folder" webkitdirectory @change="folderChange($event)" />
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <el-divider />
    <div class="file-navigator">
      <div class="left">
        <div>
          <el-breadcrumb separator=">">
            <template v-for="(item, index) in fileMainStore.breadList" :key="index">
              <el-breadcrumb-item :to="{name: 'file', params: {pid: item.pid}}">
                <span v-if="item.pid==='0'">全部文件</span>
                <span v-else>{{item.name}}</span>
              </el-breadcrumb-item>
            </template>
          </el-breadcrumb>
        </div>
        <div class="btn-area" v-if="checksSelect.length">
          <el-button type="danger" @click="removeRowEvent(checksSelect)">删除</el-button>
          <el-button color="#626aef" :dark="isDark" @click="cancelSelect">取消选择</el-button>
        </div>
      </div>
      <div class="switch-button">
        <div @click="changeShowWay(0)" :class="[currentIndex == 0?'icon_active':'icon-box']">
          <svg-icon icon-class="shouqi" class="icon" />
        </div>
        <div @click="changeShowWay(1)" :class="[currentIndex == 1?'icon_active':'icon-box']">
          <svg-icon icon-class="open" class="icon" />
        </div>
      </div>
    </div>
    <div class="file-menu">
      <!-- 表格形式展示 -->
      <div v-if="currentIndex === 0" class="table-type">
        <vxe-table
          show-overflow
          ref="fileTable"
          stripe
          @checkbox-change="checkboxChange"
          @checkbox-all="selectAllEvent"
          :row-config="{isCurrent: true, isHover: true}"
          @current-change="rowChange"
          :data="fileData"
        >
          <vxe-column type="checkbox" width="60" />
          <vxe-column v-if="!editFileName.isShowEdit" field="name" title="文件名" sortable width="700">
            <template v-slot="{ row }">
              <div class="edit-row">
                <svg-icon v-if="row.isDir === 1" icon-class="folder" class="icon" />
                <svg-icon v-if="row.suffix === '.docx' || row.suffix === '.doc'" icon-class="docx" class="icon" />
                <svg-icon v-if="row.suffix === '.excel' || row.suffix === '.xlsx'" icon-class="excel" class="icon" />
                <svg-icon v-if="row.suffix === '.pdf'" icon-class="pdf" class="icon" />
                <svg-icon v-if="row.suffix === '.ppt'" icon-class="ppt" class="icon" />
                <svg-icon v-if="row.suffix === '.md'" icon-class="md" class="icon" />
                <svg-icon v-if="row.suffix === '.txt'" icon-class="txt" class="icon" />
                <span>{{row.name}}</span>
                <svg-icon icon-class="edit" class="edit-icon" @click.stop="editEvent(row)" />
              </div>
            </template>
          </vxe-column>
          <vxe-column v-else field="name" title="文件名" sortable width="800">
            <template v-slot="{ row }">
              <div v-if="editFileName.id === row.appFileId" class="edit-row" >
                <svg-icon v-if="row.isDir === 1" icon-class="folder" class="icon" />
                <svg-icon v-if="row.suffix === '.docx' || row.suffix === '.doc'" icon-class="docx" class="icon" />
                <svg-icon v-if="row.suffix === '.excel'" icon-class="excel" class="icon" />
                <svg-icon v-if="row.suffix === '.pdf'" icon-class="pdf" class="icon" />
                <svg-icon v-if="row.suffix === '.ppt'" icon-class="ppt" class="icon" />
                <svg-icon v-if="row.suffix === '.md'" icon-class="md" class="icon" />
                <svg-icon v-if="row.suffix === '.txt'" icon-class="txt" class="icon" />
                <el-input
                  ref="editInput"
                  autofocus
                  v-model="editFileName.name"
                  placeholder="请输入文件名"
                  @change="changeEvent"
                  @blur="blurEvent"
                />
              </div>
              <div v-else class="edit-row">
                <svg-icon v-if="row.isDir === 1" icon-class="folder" class="icon" />
                <svg-icon v-if="row.suffix === '.docx' || row.suffix === '.doc'" icon-class="docx" class="icon" />
                <svg-icon v-if="row.suffix === '.excel' || row.suffix === '.xlsx'" icon-class="excel" class="icon" />
                <svg-icon v-if="row.suffix === '.pdf'" icon-class="pdf" class="icon" />
                <svg-icon v-if="row.suffix === '.ppt'" icon-class="ppt" class="icon" />
                <svg-icon v-if="row.suffix === '.md'" icon-class="md" class="icon" />
                <svg-icon v-if="row.suffix === '.txt'" icon-class="txt" class="icon" />
                <span >{{row.name}}</span>
                <svg-icon icon-class="edit" class="edit-icon" @click.stop="editEvent(row)" />
              </div>
            </template>
          </vxe-column>
          <vxe-column field="size" title="大小" sortable>
            <template v-slot="{ row }">
              <span v-if="row.isDir === 1">-</span>
              <span v-else>{{row.size}}</span>
            </template>
          </vxe-column>
          <vxe-column field="type" title="类型" sortable>
            <template v-slot="{row}">
              <span v-if="row.isDir === 1">文件夹</span>
              <span v-else>{{row.suffix}}</span>
            </template>
          </vxe-column>
          <vxe-column field="owner" title="所有者" sortable >
            <template v-slot="{ row }">
              <span >{{row.username}}</span>
            </template>
          </vxe-column>
          <vxe-column field="uploadTime" title="最后修改" sortable />
        </vxe-table>
        <el-button type="danger" size="small" plain :disabled="isDisabled" @click="deleteActiveLists">批量刪除</el-button>
      </div>
      <!-- 列表展示 -->
      <div class="list-type" v-if="currentIndex === 1">
        <el-row :gutter="20">
          <el-col span="" style="margin: 10px;padding: 0px;" v-for="(item,index) in fileData">
            <div :class="[isChecked(item.appFileId) ? 'active-fileItem' : 'file-item']" @click.stop="listFileClick(item)">
              <div class="top">
                <el-checkbox-group v-model="checksSelect" style="margin-top: 4px;">
                  <el-checkbox
                    :label="item.appFileId"
                    @click.stop.native="()=>{}"
                  />
                </el-checkbox-group>
                <span @click.stop>
                   <el-dropdown trigger="click" >
                    <MoreFilled class="more-icon" />
                    <template #dropdown>
                      <el-dropdown-menu style="width: 120px;">
                        <el-dropdown-item
                          v-if="item.isDir != 1"
                          style="padding:10px 0px;font-size: 12px;display: flex; justify-content: center;"
                        >
                          <a @click="downloadFile(item)" >下载</a>
                        </el-dropdown-item>
                        <el-dropdown-item
                          style="padding:10px 0px; font-size: 12px;display: flex; justify-content: center;"
                          @click="editEvent(item)"
                        >
                          重命名
                        </el-dropdown-item>
                         <el-dropdown-item
                          style="padding:10px 0px; font-size: 12px;display: flex; justify-content: center;color: red;"
                          @click="removeRowEvent([item.appFileId])"
                        >
                          删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </span>
              </div>
              <div class="center">
                <svg-icon v-if="item.isDir === 1" icon-class="folder" class="icon" />
                <svg-icon v-if="item.suffix === '.docx' || item.suffix === '.doc'" icon-class="docx" class="icon" />
                <svg-icon v-if="item.suffix === '.excel' || item.suffix === '.xlsx'" icon-class="excel" class="icon" />
                <svg-icon v-if="item.suffix === '.pdf'" icon-class="pdf" class="icon" />
                <svg-icon v-if="item.suffix === '.ppt'" icon-class="ppt" class="icon" />
                <svg-icon v-if="item.suffix === '.md'" icon-class="md" class="icon" />
                <svg-icon v-if="item.suffix === '.txt'" icon-class="txt" class="icon" />
              </div>
              <div class="bottom">
                <el-input
                  v-if="editFileName.id === item.appFileId && editFileName.isShowEdit"
                  ref="editInput"
                  style="height: 20px;font-size: 12px;"
                  autofocus
                  v-model="editFileName.name"
                  placeholder="请输入文件名"
                  @change="changeEvent"
                  @blur="blurEvent"
                  @click.stop.native
                />
                <span v-else class="item_title">{{ item.name }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <div class="file-upload-list" v-if="isShowUploadList">
    <div class="title">
      <div>
        <span class="list">上传列表({{uploadList.length}})</span>
        <span class="clear" @click="deleteSuccess">清空已完成</span>
      </div>
      <span @click="closeUploadList" style="cursor: pointer;font-size: 24px;opacity: .7;">x</span>
    </div>
    <div class="file-upload" v-for="(item,index) in uploadList">
      <div class="file-news">
        <span style="font-size: 12px;">{{item.name}}</span>
        <span @click="deleteItem(index)" class="clearItem">x</span>
      </div>
      <div class="progress">
        <el-progress :stroke-width="6" :percentage="Math.round(item.percent)" style="width:100%;" />
        <div>
          <svg-icon v-if="item.upload" icon-class="suspend" @click="handleClickBtn(item)" />
          <svg-icon v-else icon-class="start" @click="handleClickBtn(item)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, reactive, ref, watch, computed  } from "vue";
import {useRouter, useRoute} from 'vue-router'
import {fileUploadController} from '@/api'
import MD5 from 'crypto-js/md5'
import {fileStore} from '../../store'
import { storeToRefs } from 'pinia'
import {MoreFilled, Search, Position} from '@element-plus/icons-vue'
import {Base64} from 'js-base64'
import {getCookies} from '../../utils/auth.js'

// 获取pinia中的实例
const fileMainStore = fileStore()


// 路由实例对象
const router = useRouter()
const route = useRoute()


// 展示方式选中索引
const currentIndex = ref(1)
// 文件数据
const fileData = ref([])

const isEdit = ref(false)
const fileTable = ref<any>(null)
const editInput = ref<any>(null)
const folder = ref<any>(null)

// 是否展示上传列表
const isShowUploadList = ref(false)
// 上传列表
const uploadList = ref([])

// 是否展示文件名编辑框
const editFileName = reactive({
  isShowEdit: false,
  id: null,
  name: null,
  type: null
})

// 批量删除按钮
const isDisabled = ref(true)

// 上传文件配置
const fileConfig = reactive({
  chunkListMap: new Map(),
  requestMap: new Map()
})

// 上传文件夹拆开集合
const folderList = ref([])
// 上传的文件保存数组
const folderFile = {}
// 文件列表复选框选中数组
const checksSelect = ref([])

//用户信息
const user_id=getCookies('user_id')
const username=getCookies('username')

// 搜索信息
const searchName = ref('')



// 页面挂载调用请求
onMounted(() => {
  const pid = route.params.pid
  getFileList(pid)
})
onUnmounted(() => {
  localStorage.removeItem('file')
  localStorage.setItem('file', [])
})

// 修改展示文件形式的
const changeShowWay = (type) => {
  currentIndex.value = type
}

// 搜索文件
const searchEvent = async () => {
  const res = await fileUploadController.getFileList({name: searchName.value, user_id: user_id})
  if(res.data.code === 200) {
    fileData.value = res.data.data
    fileData.value.forEach(item => {
      if(item.size > 1 * 1024 *1024) {
        item.size = (item.size / 1024 /1024).toFixed(2) + ' M'
      } else {
        item.size = item.size.toFixed(2) + ' KB'
      }
    })
  }
}
// 清空搜索
const clearInput = () => {
  searchName.value = ''
  getFileList(0)
}

// 点击下载文件触发
const downloadFile = (item) => {
  console.log(item)
  window.open(("http://152.136.188.204:9099" + item.path), "_self")
}


// 监听路由变化，文件夹参数改变了重新获取数据
watch(route, (newValue, oldValue) => {
  const name = null
  fileData.value.forEach(item => {
    if(item.appFileId.toString() === newValue.params.pid) {
      name = item.name
    }
  })
  fileMainStore.change_Bread({pid: newValue.params.pid, name: name})
  getFileList(newValue.params.pid)
},{immediate: true, deep: true})

// 获取文件列表数据
async function getFileList(pid) {
  const res = await fileUploadController.getFileList({pid: pid, user_id: user_id})
  if(res.data.code === 200) {
    fileData.value = res.data.data
    fileData.value.forEach(item => {
      if(item.size > 1 * 1024 *1024) {
        item.size = (item.size / 1024 /1024).toFixed(2) + ' M'
      } else {
        item.size = item.size.toFixed(2) + ' KB'
      }
    })
  }
  console.log('文件数据==')
  console.log(fileData.value)
}

// 点击表格文件时触发
const rowChange = (rowIndex) => {
  const row = rowIndex.row
  if(row.isDir === 1) {
    router.push({name: 'file', params: {pid: row.appFileId}})
    getFileList(row.appFileId)
  } else {
    let url ="http://152.136.188.204:9099"+row.path;
    window.open('http://152.136.188.204:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
  }
}
// 点击列表文件时触发
const listFileClick = (item) => {
  if(item.isDir === 1) {
    router.push({name: 'file', params: {pid: item.appFileId}})
    getFileList(item.appFileId)
  } else {
    let url ="http://152.136.188.204:9099"+item.path;
    window.open('http://152.136.188.204:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
  }
}
// 使用计算属性，给列表文件选中时动态绑定class
const isChecked = computed(() => (id) => {
  const istrue = false
  checksSelect.value.forEach(item => {
    if(item === id) {
      istrue = true
    }
  });
  return istrue
})
// 取消列表文件选中
const cancelSelect = () => {
  checksSelect.value = []
}


// 点击编辑按钮触发
const editEvent = (row) => {
  editFileName.id = row.appFileId
  editFileName.isShowEdit = true
  if(row.name.includes('.')) {
    editFileName.name = row.name.split('.')[0]
    editFileName.type = row.name.split('.')[1]
  } else {
    editFileName.name = row.name
  }
  nextTick(() => {
    editInput.value.focus()
  })
}

// 值改变后失去焦点或按下enter时触发
const changeEvent = async (value) => {
  if(editFileName.type) {
    const res = await fileUploadController.updateFile({app_file_id: editFileName.id, name: `${value}.${editFileName.type}`})
    if(res.data.code === 200) {
      ElMessage({message: '修改成功', type: 'success'})
      editFileName.isShowEdit = false
      editFileName.name = null
      editFileName.type = null
      getFileList(route.params.pid)
    }
  } else {
    const res = await fileUploadController.updateFile({app_file_id: editFileName.id, name: value})
    if(res.data.code === 200) {
      ElMessage({message: '修改成功', type: 'success'})
      editFileName.isShowEdit = false
      editFileName.name = null
      editFileName.type = null
      getFileList(route.params.pid)
    }
  }
}
// 不改变值时失去焦点触发
const blurEvent = (value) => {
  editFileName.isShowEdit = false
}


/* 批量刪除*/
function deleteActiveLists() {
  const selectRecords = fileTable.value.getCheckboxRecords().map(currentVal => currentVal.appFileId)
  removeRowEvent(selectRecords)
}
// 改变批量删除按钮状态
function checkboxChange() {
  if (fileTable.value.getCheckboxRecords().length > 0) isDisabled.value = false
  if (fileTable.value.getCheckboxRecords().length < 1) isDisabled.value = true
}
// 全选事件，改变批量删除按钮状态
function selectAllEvent() {
  if (fileTable.value.getCheckboxRecords().length > 0) isDisabled.value = false
  if (fileTable.value.getCheckboxRecords().length < 1) isDisabled.value = true
}
function removeRowEvent(idList) {
  ElMessageBox.confirm(
    '此操作为将永久删除, 是否继续?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    const res = await fileUploadController.delFile({id_list: idList})
    if(res.data.code === 200) {
      ElMessage({message: '删除成功', type: 'success'})
      isDisabled.value = true
      getFileList(route.params.pid)
      checksSelect.value = []
    }
  })
}


// 文件状态改变时触发的钩子
const handleChange = (file) => {
  isShowUploadList.value = true
  if(!file) return
  if(file.parentId) {
    const fileObj = file
  } else {
    const fileObj = file.raw
  }
  // 根据文件内容生成 hash 值
  const hash = MD5(fileObj.name)
  // 保存每一个文件部分信息，实现独立进度条和独立按钮
  uploadList.value.push({name: fileObj.name, md5: hash, percent: null, percentCount: null, upload: true})
  console.log('uploadList===')
  console.log(uploadList.value)
  // 判断文件大小，小于10M直接上传，大于10M分片上传
  if(fileObj.size < 10 * 1024 * 1024) {

    const formData = new FormData()
    formData.append('file', fileObj)
    formData.append('name', fileObj.name)
    formData.append('size', fileObj.size)
    formData.append('md5', hash)
    formData.append('chunk', 0)
    formData.append('chunks', 0)

    formData.append('pid', fileObj.parentId??=0)
    formData.append('user_id',user_id)
    formData.append('username',username)
    fileUploadController.upload(formData).then(res => {
      if(res.data.code === 200) {
        uploadList.value.forEach(item => {
          if(item.name === fileObj.name) {
            if(!item.percentCount) {
              item.percentCount = 100
            }
            item.percent += item.percentCount
          }
        })
        getFileList(0)
      }
    })
  } else {
    // 将文件按固定大小（2M）进行切片
    const chunkSize = 2 * 1024 * 1024
    const chunkList = [] // 保存所有切片的数组
    const chunkListLength = Math.ceil(fileObj.size / chunkSize) // 计算总共多少个切片
    // 生成切片
    let curChunk = 0 // 切片的初始位置
    for(let i = 0; i < chunkListLength; i++) {
      const item = {
        file: fileObj.slice(curChunk, curChunk + chunkSize),
        chunks: chunkListLength, // 文件切片总数
        chunk: i, // 当前切片位置
        name: fileObj.name,
        size: fileObj.size,
        md5: hash,
        pid: fileObj.parentId??=0
      }
      curChunk += chunkSize
      // 保存每个切片
      chunkList.push(item)
    }
    fileConfig.chunkListMap.set(hash, chunkList)
    sendRequest()
  }
}
// 分片上传请求
const sendRequest = () => {
  fileConfig.chunkListMap.forEach((value, key) => {
    const requestList = [] // 请求集合
    value.forEach((item, index) => {
      const fn = () => {
        const formData = new FormData()
        formData.append('chunk', item.chunk)
        formData.append('file', item.file)
        formData.append('chunks', item.chunks)
        formData.append('name', item.name)
        formData.append('size', item.size)
        formData.append('md5', item.md5)
        formData.append('pid', item.pid)
        formData.append('user_id',user_id)
        formData.append('username',username)
        return fileUploadController.upload(formData).then(res => {
          if(res.data.code === 200) {
            uploadList.value.forEach(item2 => {
              if(item2.md5 === item.md5) {
                if(item2.percent >= 100) {
                  item2.percent = 100
                } else {
                  if(!item2.percentCount) {
                    item2.percentCount = 100 / item.chunks
                  }
                  item2.percent += item2.percentCount
                }
              }
            })
            delete fileConfig.chunkListMap.get(item.md5)[item.chunk]
          }
        })
      }
      requestList.push(fn)
    })
    fileConfig.requestMap.set(key, requestList)
    requestList = []
  })
  fileConfig.requestMap.forEach((value, key) => {
    let i = 0
    const send = () => {
      uploadList.value.forEach( async item => {
        if(item.md5 === key){
          if(!item.upload) return
          if(i >= value.length) {
            getFileList(0)
            return
          }
          await value[i]()
          i++
          send()
        }
      })
    }
    send()
  })
}


// 点击上传文件夹触发input按钮
const uploadFolder = () => {
  folder.value.click()
}
// 上传文件夹状态改变时触发
const folderChange = (event) => {
  const files = event.target.files
  folderFile = files
  for(let key in files) {
    if(files[key].webkitRelativePath) {
      folderList.value.push(files[key].webkitRelativePath.split('/'))
    }
  }
  const result = []
  folderList.value.forEach(item => {
    result.push(singleFolder(item, 0, []))
  })
  result.forEach((item, index) => {
    deepUpload(item, 0, index)
  })
}

function singleFolder(newPath, level, folder) {
  let sum = 0
  if(!newPath[level].includes('.')) {
    const node = {
      children: [],
      isDir: true,
      name: newPath[level],
      level
    }
    folder.push(node)
    if(newPath[level+1]) {
      node.children = singleFolder(newPath, level+1, node.children)
    }
  } else {
    const node = {
      isDir: false,
      name: newPath[level],
      level
    }
    folder.push(node)
  }
  return folder;
}

const parentId = null
function deepUpload(folder, returnParentId, index) {
  folder.forEach(item => {
    if(item.isDir) {
      const id = item.parentId ? item.parentId : returnParentId
      fileUploadController.uploadFolder({app_folder_name: item.name, app_folder_pid: id,user_id:user_id,username:username}).then(res => {
        if(res.data.code === 200) {
          parentId = res.data.data.app_folder_pid
          item.parentId = parentId
          if(item.children && item.children.length) {
            deepUpload(item.children, parentId, index)
          }
        } else {
          console.log('已存在该文件夹')
          return;
        }
      })
    } else {
      for(let i in folderFile) {
        if(typeof folderFile[i] === 'object') {
           if(folderFile[i].name === item.name) {
            folderFile[i].parentId = parentId
            handleChange(folderFile[i])
          }
        }
      }
    }
  })  
}


// 清空上传列表已完成
const deleteSuccess = () => {
  uploadList.value.forEach((item,index) => {
    if(Math.round(item.percent) === 100) {
      uploadList.value.splice(index, 1)
    }
  })
}
// 删除指定上传文件
const deleteItem = (index) =>{
  uploadList.value.splice(index, 1)
}
// 关闭上传列表
const closeUploadList = () => {
  isShowUploadList.value = false
}

// 按下暂停按钮
const handleClickBtn = (item) => {
  item.upload = !item.upload
  // 如果不暂停则继续上传
  if(item.upload ) {
    sendRequest()
  }
}

</script>

<style scoped lang="scss">
.file-wrapper {
  height: 100%;
  width: 99%;
  margin: 5px 10px;
  padding-top: 20px;
  .file-head {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    .left {
      display: flex;
      width: 100px;
      align-items: center;
      span {
        font-size: 30px;
        font-weight: bold;
      }
      .refresh{
        margin-left: 15px;
      }
    }
    .right {
      // border: 1px solid red;
      display: flex;
      .search-area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 25px;
        .search-icon {
          width: 25px;
          height: 25px;
          opacity: .6;
          margin-left: 10px;
        }
      }
      
      .image {
        width: 35px;
        height: 35px;
        margin-right: 10px;
        opacity: .6;
      }
    }
  }
  .file-navigator {
    display: flex;
    height: 30px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .left {
      display: flex;
      align-items: center;
    }
    .btn-area {
      font-size: 12px;
      margin-left: 20px;
      .el-button {
        height: 25px;
      }
    }
    .switch-button {
      display: flex;
      .icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-right: 5px;
        border-radius: 6px;
        .icon {
          width: 15px;
          height: 15px;
        }
      }
      .icon_active {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-right: 5px;
        border-radius: 6px;
        background-color: #F2F9F0;
        border: 1px solid #B6DDAA;
      }
    }
  }
  .file-menu {
    .table-type {
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
      .edit-row {
        display: flex;
        align-items: center;
        .edit-icon {
          display: none;
          margin-left: 10px;
          opacity: .6;
        }
      }
      .edit-row:hover .edit-icon {
        display: block;
        margin-left: 10px;
        opacity: .6;
      }
      .edit-box {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .list-type {
      .file-item {
        width: 100px;
        height: 110px;
        border-radius: 5px;
        .top {
          height: 20px;
          margin: 4px;
          overflow: hidden;
          .el-checkbox {
            opacity: 0;
          }
          
        }
        .center {
          height: 50px;
          text-align: center;
          .icon {
            width: 50px;
            height: 50px;
          }
        }
        .bottom {
          font-size: 12px;
          text-align: center;
          margin-top: 10px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          letter-spacing: 1px;
        }
      }
      .active-fileItem {
        width: 100px;
        height: 110px;
        border-radius: 5px;
        background-color: #F4F5F7;
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 4px;
          .el-checkbox {
            height: 0px;
            opacity: 1;
          }
          .more-icon {
            width: 20px;
            height: 20px;
            opacity: .4;
          }
        }
         .center {
          height: 50px;
          text-align: center;
          .icon {
            width: 50px;
            height: 50px;
          }
        }
        .bottom {
          font-size: 12px;
          text-align: center;
          margin-top: 10px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          letter-spacing: 1px;
        }
      }
      .file-item:hover {
        background-color: #F4F5F7;
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 4px;
          .el-checkbox {
            height: 0px;
            opacity: 1;
          }
          .more-icon {
            width: 20px;
            height: 20px;
            opacity: .4;
          }
        }
      }
    }
  }
}
.file-upload-list {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 10px;
  min-height: 150px;
  width: 350px;
  padding: 15px;
  border: 1px solid #DEDEDE;
  .title {
    display: flex;
    justify-content: space-between;
    .list {
      font-size: 18px;
      font-weight: bold;
      margin-right: 10px;
    }
    .clear {
      font-size: 12px;
      color: #2B85E4;
      cursor: pointer;
    }
  }
  .file-upload {
    margin-top: 15px;
    .file-news {
      display: flex;
      justify-content: space-between;
      opacity: .6;
      margin-bottom: 4px;
      margin-right: 4px;
      font-size: 15px;
      .clearItem {
        cursor: pointer;
        display: none;
      }
    }
    .progress {
      display: flex;
      justify-content: space-between;
      .show-progress {
        box-sizing: border-box;
        width: 360px;
        height: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1px;
        padding: 0px 10px;
        background-color: #ecf5ff;
        border-radius: 4px;
      }
    }
  }
  .file-upload:hover .clearItem {
    display: block;
  }
}


// 新建文件夹
.create_folder {
  width: 100%;
  line-height: 45px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  .icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
}
// 上传操作
.up_file, .up_dir {
  width: 100%;
  line-height: 35px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  margin: 4px 0;
  .icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
}

::v-deep .el-dropdown-menu__item {
  padding: 0;
}

::v-deep .el-checkbox__label {
  display: none;
}



</style>
